<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background: url(img/1.jpg) no-repeat;
        }
        .box {
            height: 165px;
            padding-top: 35px;
            text-align: center;
            background: rgba(255,255,255,0.3);
        }
        img {
            cursor: pointer;
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img/1.jpg" alt="" width="200px"/>
        <img src="img/2.jpg" alt="" width="200px"/>
        <img src="img/3.jpg" alt="" width="200px"/>
        <img src="img/4.jpg" alt="" width="200px"/>
        <img src="img/5.jpg" alt="" width="200px"/>
    </div>

    <script>
        var box = document.getElementsByTagName("div")[0];
        
        var body = document.body;
        var imgArr = box.children;
        
        for(var i=0;i<imgArr.length;i++){
            imgArr[i].index = i;
            imgArr[i].onclick = function () {
               
                body.style.backgroundImage = "url("+this.src+")";
            }
        }
    </script>

</body>
</html>